<template>
    <u-popup :show="true" mode="bottom" @close="close" closeable :closeOnClickOverlay="false" :duration="0">
        <view class="topUp">
            <text class="row j-centert black size30 bold" v-if="info.money > 0">定额码付款</text>
            <text class="row j-centert black size30 bold" v-else>请输入{{ outTitle }}</text>
            <view class="placeInputBox">
                <view
                    class="iconfont black size42 bold"
                    :class="info.type == 1 ? 'icon-jifen-xianxing' : 'icon-qianqian-'"></view>
                <input
                    type="text"
                    v-model="money"
                    disabled
                    class="placeInput"
                    :placeholder="` 请输入${outTitle}`"
                    :placeholder-class="`placeholder`" />
            </view>
        </view>
        <view class="quota">
            <view class="telNum_box">
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(1)">1</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(2)">2</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(3)">3</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(11)">
                    <view class="iconfont icon-huishan size50" :class="Forbid ? 'forbid' : 'black'"></view>
                </view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(4)">4</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(5)">5</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(6)">6</view>
                <view class="Num_list Confirm" :class="{ active: money }" @click.stop="placeInput(12)">确定</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(7)">7</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(8)">8</view>
                <view class="Num_list" :class="{ forbid: Forbid }" @click.stop="placeInput(9)">9</view>
                <view class="Num_list Zero" :class="{ forbid: Forbid }" @click.stop="placeInput(0)">0</view>
                <view class="Num_list" :class="{ bgf8: info.type == 1 || Forbid }" @click.stop="placeInput('.')">
                    <view class="dot" :class="{ bgAF: info.type == 1 || Forbid }"></view>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
    export default {
        props: ['info', 'initMoney'],
        data() {
            return {
                money: '',
            }
        },
        methods: {
            placeInput(val) {
                if (this.info.type == 1 && val == '.') return
                if (this.info.money > 0 && val != '12') return
                if (val == 12) return this.$emit('confirm', this.money)
                if (val == 11 && !this.money) return
                if (val == 11) return (this.money = this.money.slice(0, -1))
                if (this.money && this.money.includes('.') && val == '.') return

                this.money = `${this.money}${val}`.replace(/(\d*\.\d{2})\d*/, '$1')

                const resultArr = this.money.split('')
                if (resultArr.length > 1 && resultArr[0] == '0' && resultArr[1] == '0') {
                    this.money = this.money.slice(0, -1)
                } else if (resultArr[0] == '.') {
                    this.money = '0.'
                } else if (resultArr.length > 1 && resultArr[0] == '0' && resultArr[1] != '0' && resultArr[1] != '.') {
                    this.money = resultArr[1]
                }
            },
            close() {
                this.$emit('Cancel')
            },
        },
        computed: {
            outTitle() {
                if (!this.info) return
                return this.info.type == '0' ? '扣款金额' : '扣除积分'
            },
            Forbid() {
                if (!this.info) return
                return this.info.money > 0 ? true : false
            },
        },

        watch: {
            initMoney: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal) this.money = newVal
                },
            },
        },
    }
</script>

<style lang="scss" scoped>
    .topUp {
        width: 100%;
        padding: 40rpx 24rpx 0 24rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        position: relative;
    }

    .placeInputBox {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        margin-top: 40rpx;
        border-bottom: 1px solid #f8f8f8;
    }
    .placeInput {
        flex: 1;
        height: 100rpx;
        border-radius: 10rpx;
        padding-left: 20rpx;
        border: none;
        font-size: 50rpx;
        font-weight: bold;
        color: #000;
    }

    /deep/.placeholder {
        font-size: 36rpx;
        font-weight: normal;
    }

    .active {
        background-color: rgba(0, 102, 51, 1) !important;
        color: #ffffff;
    }
    .quota {
        width: 100%;
        padding: 20rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        background-color: #f7f7f7;
    }

    .telNum_box {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 16rpx;
        margin-top: 10rpx;
    }

    .Num_list {
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 46rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
    }

    .Confirm {
        height: 100%;
        grid-column: 4 / span 1;
        grid-row: 2 / span 3;
        font-weight: normal !important;
        font-size: 34rpx !important;
        background-color: rgba(0, 102, 51, 0.5);
        color: #ffffff;
    }

    .Zero {
        width: 100%;
        grid-column: 1 / span 2;
        grid-row: 4 / span 1;
    }

    .dot {
        width: 6rpx;
        height: 6rpx;
        background-color: #000;
        border-radius: 50%;
    }
    .bgf8 {
        background-color: #f1f1f1;
    }
    .forbid {
        background-color: #f1f1f1 !important;
        color: #ccc;
    }
    .bgAF {
        background-color: #ccc;
    }
</style>
